<template>
  <el-card class="box-card app-container">
    <div slot="header" class="clearfix">
      <span>个人简历</span>
    </div>
    <div class="resume-info">
      <div>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="avatar">
              <el-avatar v-if="resumeAvatar!=null" :src="prefixUrl + resumeAvatar" :size="100" fit="fill" />
            </div>
          </el-col>
          <el-col :span="20">
            <div class="name">
              <span>{{ info.resume.name }}</span>
            </div>
            <div class="person">
              <el-row style="margin-bottom: 10px">
                <span>{{ info.resume.sex | dataFilter(sexOperations) }}</span>
                <el-divider direction="vertical" />
                <span>{{ info.resume.resIdentity | dataFilter(resIdentityOperations) }}</span>
                <el-divider direction="vertical" />
                <span>{{ info.resume.birthday }}</span>
                <el-divider direction="vertical" />
                <span>{{ info.resume.resState | dataFilter(resStateOperations) }}</span>
                <el-divider direction="vertical" />
                <span>{{ info.resume.residence }}</span>
              </el-row>
              <el-row>
                <span>{{ info.resume.phone }}</span>
                <el-divider direction="vertical" />
                <span>{{ info.resume.email }}</span>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <div class="title">
          <p class="title_left">求职偏好</p>
          <div class="title_right">
            <img :src="backgroundUrl" alt="">
          </div>
        </div>
        <div class="info">
          <span>{{ info.resume.expectIndustry }}</span>
          <el-divider direction="vertical" />
          <span>{{ info.resume.expectRecruitment }}</span>
          <el-divider direction="vertical" />
          <span>{{ info.resume.expectCity }}</span>
          <el-divider direction="vertical" />
          <span>{{ info.resume.expectSalary }}k</span>
        </div>
      </div>
      <div v-if="info.educationList != null && info.educationList.length!==0">
        <div class="title">
          <p class="title_left">教育经历</p>
          <div class="title_right">
            <img :src="backgroundUrl" alt="">
          </div>
        </div>
        <div class="info">
          <div v-for="education in info.educationList" :key="education.id">
            <el-row>
              <span class="bold">{{ education.name }}</span>
              <el-divider direction="vertical" />
              <span>{{ education.degree | dataFilter(degreeOperations) }}</span>
              <el-divider direction="vertical" />
              <span>{{ education.major }}</span>
              <el-divider direction="vertical" />
              <span>{{ education.startDate }} - {{ education.endDate }}</span>
            </el-row>
            <el-row v-if="education.experienceSchool != null && education.experienceSchool.trim().length !==0">
              <span style="line-height: 30px">在校经历：{{ education.experienceSchool }}</span>
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="info.internList != null && info.internList.length!==0">
        <div class="title">
          <p class="title_left">实习经历</p>
          <div class="title_right">
            <img :src="backgroundUrl" alt="">
          </div>
        </div>
        <div class="info">
          <div v-for="intern in info.internList" :key="intern.id">
            <el-row>
              <span class="bold">{{ intern.companyName }}</span>
              <el-divider direction="vertical" />
              <span>{{ intern.companyIndustry }}</span>
              <el-divider direction="vertical" />
              <span>{{ intern.title }}</span>
              <el-divider direction="vertical" />
              <span>{{ intern.startDate }} - {{ intern.endDate }}</span>
            </el-row>
            <el-row v-if="intern.content != null && intern.content.trim().length !==0">
              <span style="line-height: 30px">实习内容：{{ intern.content }}</span>
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="info.projectList != null && info.projectList.length!==0">
        <div class="title">
          <p class="title_left">项目经历</p>
          <div class="title_right">
            <img :src="backgroundUrl" alt="">
          </div>
        </div>
        <div class="info">
          <div v-for="project in info.projectList" :key="project.id">
            <el-row>
              <span class="bold">{{ project.name }}</span>
              <el-divider direction="vertical" />
              <span>{{ project.startDate }} - {{ project.endDate }}</span>
            </el-row>
            <el-row v-if="project.link != null && project.link.trim().length !==0">
              <span>项目地址：{{ project.link }}</span>
            </el-row>
            <el-row v-if="project.description != null && project.description.trim().length !==0">
              <span style="line-height: 30px">项目描述：{{ project.description }}</span>
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="info.awardList != null && info.awardList.length!==0">
        <div class="title">
          <p class="title_left">获奖经历</p>
          <div class="title_right">
            <img :src="backgroundUrl" alt="">
          </div>
        </div>
        <div class="info">
          <div v-for="award in info.awardList" :key="award.id">
            <el-row>
              <span class="bold">{{ award.name }}</span>
              <el-divider direction="vertical" />
              <span>{{ award.awardTime }}</span>
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="info.resume.summary != null && info.resume.summary.trim().length !==0">
        <div class="title">
          <p class="title_left">个人总结</p>
          <div class="title_right">
            <img :src="backgroundUrl" alt="">
          </div>
        </div>
        <div class="info">
          <el-row><span style="line-height: 30px">{{ info.resume.summary }}</span></el-row>
        </div>
      </div>
    </div>
  </el-card>

</template>
<script>
import { sexOperations, resIdentityOperations, resStateOperations, degreeOperations } from '@/utils/constants'
import { getResumeInfo } from '@/api/resume'
export default {
  name: 'ViewResume',
  data() {
    return {
      info: {
        resume: [],
        awardList: [],
        educationList: [],
        internList: [],
        projectList: []
      },
      sexOperations: sexOperations,
      resIdentityOperations: resIdentityOperations,
      resStateOperations: resStateOperations,
      degreeOperations: degreeOperations,
      prefixUrl: process.env.VUE_APP_BASE_API + 'register/viewAvatar/',
      resumeAvatar: undefined,
      backgroundUrl: require('../../assets/imgs/title-bg.png')
    }
  },
  mounted() {
    this.getResumeInfo()
  },
  methods: {
    getResumeInfo() {
      const param = { id: this.$route.query.id }
      getResumeInfo(param).then(
        (response) => {
          this.info = response.data
          this.resumeAvatar = this.info.resume.resumeAvatar
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 60%;
  margin: 20px auto;
}
  .info{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .name {
    color: #1f2d3d;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .resume-info div{
    margin-bottom: 5px;
  }

.title {
  height: 33px;
  line-height: 33px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  position: relative;
  border-bottom: 0.5px solid #007b86;
}

.title_left {
  float: left;
  margin: 0px 0px;
  width: 88px;
  height: 33px;
  background: #007b86;
  padding-left: 16px;
  border-top-left-radius: 8px;
}

.title_right {
  float: left;
  margin: 0px;
  width: 74px;
  height: 33px;
  margin-left: -1px;
}

.info div{
  padding: 2px 0px 2px 0px;
}

  .bold {
    font-weight: bold;
  }
</style>
